@mdi/js is a package that provides Material Design Icons as JavaScript constants. It allows developers to easily integrate Material Design Icons into their web applications by using SVG paths.

What are @mdi/js's main functionalities?

Importing Icons

You can import individual icons from the @mdi/js package. This allows you to use specific icons in your application without importing the entire library.

const { mdiAccount } = require('@mdi/js');

Using Icons in SVG

You can use the imported icon paths in your SVG elements. This allows you to render the icons directly in your HTML.

<svg viewBox="0 0 24 24"><path d="M12,2A10,10 0 1,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 1,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 1,0 18,12A6,6 0 0,0 12,6Z" /></svg>

Dynamic Icon Rendering

You can dynamically render icons by using the icon paths in your JavaScript code. This is useful for applications that need to render different icons based on user interactions or data.

const iconPath = require('@mdi/js').mdiAccount;
const svgElement = `<svg viewBox="0 0 24 24"><path d="${iconPath}" /></svg>`;

Other packages similar to @mdi/js

Note: Please use the main MaterialDesign repo to report issues. This repo is for distribution of the JavaScript files only.

JavaScript/TypeScript - Material Design Icons

JavaScript and TypeScript distribution for the Material Design Icons. This module contains all the path data for all icons.

npm install @mdi/js

Usage

import { mdiAccount } from '@mdi/js'

console.log(mdiAccount); // "M...Z"

Note: WebPack 4 or Rollup will tree shake unused icons.

NPM @MDI Organization

Learn More

Keywords

FAQs

What is @mdi/js?

Is @mdi/js popular?

Is @mdi/js well maintained?

Package last updated on 27 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install